<style scoped lang="less"></style>
<template>
  <div class="alarm-blk">
    <div class="opers flex v-c mb-20">
      <el-form :inline="true" class="filter-blk flex-1">
        <el-form-item label="报警时间">
          <el-date-picker
            v-model="filterForm.alarmtime"
            type="date"
            placeholder="请选择"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="设备类型" v-if="type == 'fireControl'">
          <el-select v-model="filterForm.deviceClassify" placeholder="请选择">
            <el-option label="电气火灾" value="1"></el-option>
            <el-option label="消防用水" value="2"></el-option>
            <el-option label="烟感" value="3"></el-option>
            <el-option label="可燃气体" value="4"></el-option>
            <el-option label="火灾自动联网" value="5"></el-option>
            <el-option label="消防可视化" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报警类型" v-else>
          <el-select v-model="filterForm.alarmType" placeholder="请选择">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in alarmType"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input
            placeholder="请输入"
            v-model.trim="filterForm.businessName"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchAction"
            ><i class="iconfont icon-search"></i> 查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="dataList" style="width: 100%" v-loading="loading">
      <el-table-column prop="businessName" label="所属单位"></el-table-column>
      <el-table-column prop="alarmTypeName" label="报警类型"></el-table-column>
      <el-table-column prop="content" label="报警内容"></el-table-column>
      <el-table-column prop="remark" label="报警时间">
        <template slot-scope="scope">{{ scope.row.alarmtime }}</template>
      </el-table-column>
      <el-table-column label="处置" width="120">
        <template slot-scope="scope">
          <div class="nowrap">
            <el-button
              type="primary"
              @click="handleAction(scope.row)"
              v-if="!scope.row.isHandle"
              :disabled="!$store.getters.hasEditPermission"
              >处置</el-button
            >
            <el-button type="primary" @click="handleAction(scope.row)" v-else
              >已处置</el-button
            >
            <el-button
              type="primary"
              @click="muteAction(scope.row)"
              v-if="scope.row.deviceClassify == 3"
              :disabled="!$store.getters.hasEditPermission"
              >消音</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total > 0"
      class="text-right mt-20"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, total, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 处置 start -->
    <AlarmHandle
      v-if="handleModalVisible"
      :visible.sync="handleModalVisible"
      :activeAlarm="activeData"
      :activeDevice="alarmDevice"
      :autoClose="false"
      @success="submitSuccessAction"
      @showMonitor="showMonitor"
    >
      <el-button
        type="cancel"
        @click="closeDoor"
        v-if="alarmDevice && alarmDevice.productId == 6002"
        >远程关门</el-button
      >
    </AlarmHandle>
    <!-- <el-dialog
            v-if="handleModalVisible"
            title="报警处置"
            :visible.sync="handleModalVisible"
            :width="500 * scale + 'px'"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
        >
            <Handle
                ref="handle"
                :scale="scale"
                :activeData="activeData"
                :alarmDevice="alarmDevice"
                @success="submitSuccessAction"
                @fail="handling = false"
                @submitting="handling = true"
                @cancel="handleModalVisible = false"
            >
            </Handle>
            <div slot="footer" v-if="!activeData.isHandle">
                <el-button
                    type="cancel"
                    @click="closeDoor"
                    v-if="alarmDevice && alarmDevice.productId == 6002"
                    >远程关门</el-button
                >
                <el-button
                    type="cancel"
                    @click="showMonitor"
                    v-if="alarmDevice && alarmDevice.productId == 6002"
                    >鹰眼e通</el-button
                >
                <el-button type="cancel" @click="cancelHandle">取消</el-button>
                <el-button
                    type="primary"
                    :loading="handling"
                    @click="submitAction"
                    :disabled="!$store.getters.hasEditPermission"
                    >处置</el-button
                >
            </div>
            <div slot="footer" v-else>
                <el-button type="cancel" @click="cancelHandle">确定</el-button>
            </div>
        </el-dialog> -->
    <!-- 处置 end -->
    <!-- 设备详情 start -->
    <el-dialog
      v-if="detailModalVisible"
      title="设备详情"
      :visible.sync="detailModalVisible"
      :width="1000 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <DeviceDetail
        ref="detail"
        :rfid="alarmDevice.rfid"
        :id="alarmDevice.id"
        :productId="alarmDevice.productId"
        :classify="alarmDevice.deviceClassify"
        :number="alarmDevice.number"
        :scale="scale"
        @cancel="detailModalVisible = false"
      >
      </DeviceDetail>
    </el-dialog>
    <!-- 设备详情 end -->
  </div>
</template>
<script>
import Handle from "@/components/HandleAlarm.vue";
import DeviceDetail from "@/components/device/DeviceDetail.vue";
import AlarmHandle from "@/components/iot/AlarmHandle";
export default {
  name: "alarmList",
  props: {
    type: {
      type: String,
      default: "fireControl",
    },
    scale: {
      type: Number,
      default: 1,
    },
  },
  components: {
    AlarmHandle,
    DeviceDetail,
  },
  watch: {},
  data() {
    return {
      filterForm: {},
      dataList: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      loading: false,
      alarmType: [
        {
          name: "所有类型",
          id: "",
        },
      ],
      handleModalVisible: false,
      handling: false,
      activeData: null,
      alarmDevice: null,
      detailModalVisible: false,
    };
  },
  methods: {
    closeDoor() {
      this.$refs.handle.closeDoor();
    },
    onDoorClosed() {
      //
    },
    getDeviceDetail(deviceClassify, number, cbk) {
      this.$get("/fireFightingIOT/device/detail", {
        deviceClassify: deviceClassify,
        number: number,
        id: "",
      }).then(
        (res) => {
          cbk && cbk(res.data);
        },
        (err) => {
          //
        }
      );
    },
    showMonitor() {
      this.detailModalVisible = true;
    },
    cancelHandle() {
      this.handleModalVisible = false;
      this.alarmDevice = null;
    },
    getData(page) {
      let url = "";
      url =
        "/fireFightingIOT/historicalAlarmInfo/listHistoricalAlarmInfoListPage";
      if (!url) return;
      this.loading = true;
      let params = Object.assign(
        {
          page: page,
          limit: this.pageSize,
          deviceClassify:
            this.config.typeMap[this.type] &&
            this.config.typeMap[this.type] != 100
              ? this.config.typeMap[this.type]
              : "",
        },
        this.filterForm
      );
      this.$get(url, params).then(
        (res) => {
          this.loading = false;
          let data = res.data;
          this.currentPage = page;
          this.total = data.totalSize;
          this.dataList = data.Items;
        },
        (err) => {
          this.loading = false;
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    getAlarmType() {
      let url = "";
      let groupname = "";
      let monitorUrl = "/firefightingvisualization/alarmInfo/dictList";
      switch (this.type) {
        case "fire":
        case "chargingStation":
          url = "/electricfire/alarmInfo/dictList";
          groupname = "电气火灾监测报警类型";
          break;
        case "pool":
          url = "/firewater/alarmInfo/dictList";
          groupname = "建筑消防用水设备类型";
          break;
        case "smoke":
          url = "/independentsmoke/alarmInfo/dictList";
          groupname = "智慧独立烟感报警类型";
          break;
        case "gas":
          url = "/combustiblegas/alarmInfo/dictList";
          groupname = "可燃气体监测报警类型";
          break;
        case "fireControl":
          url = "/fireFightingIOT/historicalAlarmInfo/dictList";
          groupname = "可燃气体监测报警类型";
          break;
        case "extinguisher":
          url = "/fireFightingIOT/historicalAlarmInfo/dictList";
          groupname = "智能灭火器报警类型";
          break;
        case "auto":
          url = "/fireFightingIOT/historicalAlarmInfo/dictList";
          groupname = "自动联网报警类型";
          break;
        case "gasStation":
          url = monitorUrl;
          groupname = "加油站报警类型";
          break;
        case "ladderControl":
          url = monitorUrl;
          groupname = "智慧梯控报警类型";
          break;
        case "waters":
          url = monitorUrl;
          groupname = "智慧水域报警类型";
          break;
        case "eye":
          url = monitorUrl;
          groupname = "慧眼识别报警类型";
          break;
        case "kitchen":
          url = monitorUrl;
          groupname = "明厨亮灶报警类型";
          break;
        default:
          url = monitorUrl;
          groupname = "消防可视化监测报警类型";
          break;
      }
      if (!url) return;
      this.$get(url, {
        groupname: groupname,
      }).then(
        (res) => {
          this.alarmType = [...this.alarmType, ...res.data];
        },
        (err) => {
          this.$message.error(err.msg);
        }
      );
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    searchAction() {
      this.getData(1);
    },
    handleCurrentChange(page) {
      this.getData(page);
    },
    getDataById(id, cbk) {
      this.$get("/fireFightingIOT/historicalAlarmInfo/detail", {
        id: id,
      }).then(
        (res) => {
          let alarmData = res.data;
          this.getDeviceDetail(
            res.data.deviceClassify,
            res.data.number,
            (deviceData) => {
              cbk && cbk(alarmData, deviceData);
            }
          );
        },
        (err) => {
          this.$message.error(err.msg);
        }
      );
    },
    handleAction(item) {
      this.getDataById(item.id, (data, deviceData) => {
        this.activeData = data;
        this.alarmDevice = deviceData;
        this.handleModalVisible = true;
      });
    },
    submitAction() {
      this.$refs.handle.submitAction();
    },
    submitSuccessAction() {
      this.handleModalVisible = false;
      this.handling = false;
      this.getData(this.currentPage);
      this.alarmDevice = null;
    },
  },
  created() {
    this.getData(1);
    this.getAlarmType();
  },
};
</script>
